<style lang="less" scoped>
  @import './markdown-basic.less';
</style>
<style lang="less" scoped>
  @import './markdown-atomOneLight.less';
</style>

<template>
  <div class="container">
      <textarea v-model="input"/>
      <div class="nice-wx-box-pc">
        <section
          id="nice"
          data-tool="mdnice编辑器"
          data-website="https://www.mdnice.com"
          v-html="parseHtml"
          :ref="previewWrap"
        />
      </div>
  </div>
</template>
<script>
import MarkdownIt from 'markdown-it'
import highlightjs from '@/utils/langHighlight'

import markdownItDeflist from 'markdown-it-deflist'
import markdownItImplicitFigures from 'markdown-it-implicit-figures'
import markdownItTableOfContents from 'markdown-it-table-of-contents'
import markdownItRuby from 'markdown-it-ruby'
import markdownItImsize from 'markdown-it-imsize'

import markdownItMath from '@/utils/markdown-it-math'
import markdownItSpan from '@/utils/markdown-it-span'
import markdownItTableContainer from '@/utils/markdown-it-table-container'
import markdownItLinkfoot from '@/utils/markdown-it-linkfoot'
import markdownItImageFlow from '@/utils/markdown-it-imageflow'
import markdownItMultiquote from '@/utils/markdown-it-multiquote'
import markdownItLiReplacer from '@/utils/markdown-it-li'

// 普通解析器，代码高亮用highlight
const markdownParser = new MarkdownIt({
  html: true,
  highlight: (str, lang) => {
    if (lang === undefined || lang === '') {
      lang = 'bash'
    }
    // 加上custom则表示自定义样式，而非微信专属，避免被remove pre
    if (lang && highlightjs.getLanguage(lang)) {
      try {
        const formatted = highlightjs
          .highlight(lang, str, true)
          .value.replace(/\n/g, '<br/>') // 换行用br表示
          .replace(/\s/g, '&nbsp;') // 用nbsp替换空格
          .replace(/span&nbsp;/g, 'span ') // span标签修复
        return '<pre class="custom"><code class="hljs">' + formatted + '</code></pre>'
      } catch (e) {
        console.log(e)
      }
    }
    return '<pre class="custom"><code class="hljs">' + markdownParser.utils.escapeHtml(str) + '</code></pre>'
  }
})

markdownParser
  .use(markdownItSpan) // 在标题标签中添加span
  .use(markdownItTableContainer) // 在表格外部添加容器
  .use(markdownItMath) // 数学公式
  .use(markdownItLinkfoot) // 修改脚注
  .use(markdownItTableOfContents, {
    transformLink: () => '',
    includeLevel: [2, 3],
    markerPattern: /^\[toc\]/im
  }) // TOC仅支持二级和三级标题
  .use(markdownItRuby) // 注音符号
  .use(markdownItImplicitFigures, {figcaption: true}) // 图示
  .use(markdownItDeflist) // 定义列表
  .use(markdownItLiReplacer) // li 标签中加入 p 标签
  .use(markdownItImageFlow) // 横屏移动插件
  .use(markdownItMultiquote) // 给多级引用加 class
  .use(markdownItImsize)

export default {
  data () {
    return {
      input: '',
      previewWrap: {}
    }
  },
  methods: {
  },
  computed: {
    parseHtml () {
      return markdownParser.render(this.input)
    }
  },
  mounted () {
  }
}
</script>
<style lang="less" scoped>
#nice {
    font-size: 16px;
    color: black;
    padding: 0 10px;
    line-height: 1.6;
    word-spacing: 0px;
    letter-spacing: 0px;
    word-break: break-word;
    word-wrap: break-word;
    text-align: left;
    font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.container {
    display: flex;
    height: 100%;
    .nice-wx-box-pc {
      width: 50%;
      height: 100%;
      padding: 18px;
      box-shadow: none;
      overflow: auto;
    }
    textarea {
        width: 50%;
        height: 100%;
        padding: 10px;
    }
}
</style>
